<template>
  <div class="container">
    <navbar
      :vaniconL="true"
      :vaniconR="false"
      :noRight="true"
      iconNameL="arrow-left"
      iconNameR="icon-gengduo"
      @clickLeft="goBack"
    >综合报告</navbar>
    <div class="card">
      <div class="name">
        <img src="@/assets/images/medicine_box.png" alt />
        <span>***</span>
      </div>
      <van-divider content-position="center">{{$t('detailList.details')}}</van-divider>
      <div class="mes">
        <div class="box">
          <p>
            <span>{{$t('detailList.gender')}}:</span>
            ***
          </p>
          <p>
            <span>{{$t('detailList.medical_card_number')}}:</span>***
          </p>
          <p>
            <span>{{$t('detailList.department')}}:</span>***
          </p>
          <p>
            <span>{{$t('detailList.drug_allergy')}}:</span>***
          </p>
        </div>
        <div class="box">
          <p>
            <span>{{$t('detailList.age')}}:</span>***
          </p>
          <p>
            <span>{{$t('detailList.hospital_name')}}:</span>***
          </p>
          <p>
            <span>{{$t('detailList.doctors')}}:</span>***
          </p>
        </div>
      </div>
    </div>
    <van-divider>{{$t('report.tips')}}</van-divider>
    <div class="report-box">
      <p class="title">{{$t('report.report_text')}}:</p>
      <p class="report-text">
        暂无可疑病患区域
        <!-- 腺体类型：多量型
        右乳下内象限后分腺体见不规则形高密度肿块，范围约3.55*2.82cm，内部可见团簇状细小多形性钙化灶。
        右乳下内象限肿块伴恶化，考虑BI-RADS 4c-->
      </p>
    </div>
    <div class="ggo">
      <p class="title">
        {{$t('lungReport.suspicious_lesion')}}
        <span>0</span>
      </p>
      <div class="ggo-list">
        <van-empty
          class="custom-image"
          :image="require('@/assets/images/nodata.png')"
          :description="$t('lungReport.no_data')"
        />
        <!-- <div class="child1">
          <p class="ids">序号</p>
          <p class="site">
            <span>BI</span>
          </p>
          <p class="prob">类型</p>
          <div class="level">恶性程度</div>
        </div> -->
        <!-- <div>
          <div class="child">
            <p class="ids">1</p>
            <p class="site">
              <span>4c</span>
            </p>
            <p class="prob">肿块伴恶化</p>
            <div class="level">中度恶性</div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import { Toast } from "vant";
export default {
  name: "drReport",
  components: { navbar },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    // 返回上一页
    goBack() {
      this.$router.push({ path: "/drList" });
    },
  },
  created() {
    Toast.loading({
      message: this.$t("detailList.loading"),
      forbidClick: true,
      overlay: true,
    });
  },
  mounted() {},
  destroyed() {},
};
</script>
<style lang='scss' scoped>
.container {
  position: relative;
  height: 100vh;
  background: #f5f5f5;
  overflow-y: scroll;

  & .card {
    width: 94%;
    // height: 2rem;
    background: #ffffff;
    margin: 0 auto;
    margin-top: 10px;
    box-shadow: 0px 0px 10px #cccccc;
    & .van-divider {
      margin: 0;
      font-size: 0.14rem;
    }
    & .name {
      text-align: left;
      padding: 0.1rem 0.15rem;
      & img {
        width: 0.3rem;
        height: 0.3rem;
        vertical-align: middle;
      }
      & span {
        height: 0.22rem;
        vertical-align: middle;
        color: #4973d7;
        font-weight: 600;
        margin-left: 0.1rem;
        font-size: 0.2rem;
        display: inline-block;
        width: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    & .mes {
      display: flex;
      justify-content: flex-start;
      padding-bottom: 0.15rem;
      & .box {
        margin: 0 0.3rem 0 0.15rem;
        text-align: left;
        & p {
          & span {
            color: #8d898e;
            font-size: 0.14rem;
          }
          margin: 0.1rem 0;
          font-size: 0.14rem;
        }
      }
    }
  }

  & .van-divider {
    font-size: 0.14rem;
  }

  .report-box {
    width: 94%;
    background: #ffffff;
    margin: 0 auto;
    margin-top: 10px;
    box-shadow: 0px 0px 10px #cccccc;
    & .title {
      color: #8d898e;
      font-size: 0.16rem;
      text-align: left;
      padding: 0.1rem 0.1rem 0 0.1rem;
    }
    & .report-text {
      text-align: left;
      padding: 0.15rem;
      color: #232323;
      background: #ffffff;
      font-size: 0.14rem;
      line-height: 0.2rem;
    }
  }
  & .ggo {
    width: 94%;
    background: #ffffff;
    margin: 0 auto;
    margin-top: 10px;
    box-shadow: 0px 0px 10px #cccccc;
    margin-bottom: 20px;
    & .van-divider {
      margin: 0;
    }
    & .title {
      font-size: 0.14rem;
      padding: 0.1rem;
      font-weight: bold;
      & span {
        font-size: 0.26rem;
        color: rgb(224, 0, 0);
        font-weight: bold;
        vertical-align: middle;
        margin-left: 5px;
      }
    }
    & .ggo-list {
      padding-bottom: 10px;
      & .child {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background: #fff;
        flex: 1;
        & .ids {
          font-size: 0.14rem;
          flex-basis: 10%;
        }
        & .site {
          display: flex;
          flex-direction: column;
          font-size: 0.14rem;
          flex-basis: 15%;
        }
        & .prob {
          font-size: 0.14rem;
          flex-basis: 25%;
        }
        & .level {
          font-size: 0.14rem;
          flex-basis: 25%;
          color: rgba(255, 0, 0, 0.616);
        }
      }

      & .child1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background: #ccc;
        flex: 1;
        & .ids {
          font-size: 0.12rem;
          flex-basis: 10%;
        }
        & .site {
          display: flex;
          flex-direction: column;
          font-size: 0.12rem;
          //   color: rgba(255, 0, 0, 0.616);
          flex-basis: 15%;
        }
        & .prob {
          font-size: 0.12rem;
          flex-basis: 25%;
        }
        & .level {
          font-size: 0.12rem;
          flex-basis: 25%;
        }
      }
    }
  }
}

.custom-image {
  & /deep/ .van-empty__image {
    width: 50px;
    height: 50px;
  }
  & /deep/ .van-empty__description {
    font-size: 12px;
  }
}
</style>